2.ECharts折线图一般配置解释+光滑曲线图+折线图与柱状图搭配

2024-01-20 23:56| 来源: 网络整理| 查看: 265

1.折线图一般配置

2.光滑曲线+区域阴影

3.光滑曲线+线条阴影

4.echarts跟折线阴影相关的配置可以参考W3Cschool的讲解：

5.折线图与柱状图混合

1.折线图一般配置

1.1效果图：

1.2option的配置：

var option1 = { title: { left: 'center', text: '球类爱好不完全统计', }, //提示框，默认显示 tooltip: { trigger: 'axis', axisPointer: {// 坐标轴指示器，坐标轴触发有效 type: 'line'// 默认为直线，可选为：'line' | 'shadow' }, // 控制提示格式 // formatter: function(param){ // return `${param[0].axisValue}: ${param[0].value}人` // } }, //控制直角坐标系与容器上下左右的距离 grid: { left: '12%', right: '12%', bottom: '0', top: '34%', containLabel: true,//gid区域是否包含坐标轴的刻度标签。 }, //图例相关 legend: { top:'15%', left:'center', data:['喜爱量','运动量','参与量'],//与series两个对象中的name对应 }, // x轴（指的是水平的那条线）相关配置 xAxis: [ { type: 'category', data: ['棒球','羽毛球','足球','网球','篮球','乒乓球'],//类目轴数据 axisLabel: { // 坐标轴标签 show: true, // 是否显示 inside: false, // 是否朝内 color: '#000', fontSize: 12, interval: 0,//设置刻度间间隔，0表示全部显示不间隔；auto:表示自动根据刻度个数和宽度自动设置间隔个数 }, axisLine: { // 坐标轴轴线 show: true, // 是否显示 lineStyle: { // color: '#FFFFFF', width: 1, type: 'solid' }, }, axisTick: {//刻度相关 show: true, //是否显示刻度 alignWithLabel: true,//是否对齐标签 }, inverse:true,//翻转x轴数据 } ], // y轴（垂直的那条线）设置 yAxis: [ { type: 'value',//x轴数据类型，value时就是值，category时就是分类，可用于区分y轴与x轴 axisLabel: { // 坐标轴标签 show: true, // 是否显示 // inside: true, // 标签是否朝内,默认false interval: 0,//设置刻度间间隔，0表示全部显示不间隔；auto:表示自动根据刻度个数和宽度自动设置间隔个数 rotate: 0, // 旋转角度 margin: 5, // 刻度标签与轴线之间的距离 color: '#000', // 标签颜色默认取轴线的颜色 fontSize: 12//标签字号 }, splitLine: { // 网格线 show: true, // 是否显示，默认为true lineStyle:{ color: ['#eee'], width: 1, type: 'solid' } }, axisLine: { // 坐标轴轴线 show: false, // 是否显示,默认false lineStyle: { // color: '#FFFFFF',//轴线颜色 width: 1,//轴线宽度 type: 'solid'//轴线类型 } }, } ], series: [ { name: '喜爱量', type: 'line',//表明是折线图line data: [10,50,30,26,17,47],//值数据，与类型数据一一对应 itemStyle : { normal : { color:'#FA677B', //折线点上的颜色 lineStyle:{ color:'#FA677B' //折线上颜色 } } }, }, { name: '运动量', type: 'line',//表明柱状体，饼图是pie，折线图是line data: [13,20,40,16,47,27],//值数据，与类型数据一一对应 itemStyle : { normal : { color:'#F9CF9A', //折线点上的颜色 lineStyle:{ color:'#F9CF9A' //折线上颜色 } } }, }, { name: '参与量', type: 'line',//表明柱状体，饼图是pie，折线图是line data: [20,15,21,19,27,16],//值数据，与类型数据一一对应 itemStyle : { normal : { color:'#8C2DD6', //折线点上的颜色 lineStyle:{ color:'#8C2DD6' //折线上颜色 } } }, } ], }; 2.光滑曲线+区域阴影

2.1效果图：

2.2关键代码：

2.3option配置如下：

var option1 = { //提示框，默认显示 tooltip: { trigger: 'axis', axisPointer: {// 坐标轴指示器，坐标轴触发有效 type: 'line'// 默认为直线，可选为：'line' | 'shadow' }, // 控制提示格式 // formatter: function(param){ // return `${param[0].axisValue}: ${param[0].value}人` // } }, //控制直角坐标系与容器上下左右的距离 grid: { left: '12%', right: '12%', bottom: '0', top: '34%', containLabel: true,//gid区域是否包含坐标轴的刻度标签。 }, //图例相关 legend: { top:'15%', left:'center', data:['喜爱量','运动量','参与量'],//与series两个对象中的name对应 }, // x轴（指的是水平的那条线）相关配置 xAxis: [ { type: 'category', data: ['棒球','羽毛球','足球','网球','篮球','乒乓球'],//类目轴数据 axisLabel: { // 坐标轴标签 show: true, // 是否显示 inside: false, // 是否朝内 color: '#000', fontSize: 12, interval: 0,//设置刻度间间隔，0表示全部显示不间隔；auto:表示自动根据刻度个数和宽度自动设置间隔个数 }, axisLine: { // 坐标轴轴线 show: true, // 是否显示 lineStyle: { // color: '#FFFFFF', width: 1, type: 'solid' }, }, axisTick: {//刻度相关 show: true, //是否显示刻度 alignWithLabel: true,//是否对齐标签 }, inverse:true,//翻转x轴数据 } ], // y轴（垂直的那条线）设置 yAxis: [ { type: 'value',//x轴数据类型，value时就是值，category时就是分类，可用于区分y轴与x轴 axisLabel: { // 坐标轴标签 show: true, // 是否显示 // inside: true, // 标签是否朝内,默认false interval: 0,//设置刻度间间隔，0表示全部显示不间隔；auto:表示自动根据刻度个数和宽度自动设置间隔个数 rotate: 0, // 旋转角度 margin: 5, // 刻度标签与轴线之间的距离 color: '#000', // 标签颜色默认取轴线的颜色 fontSize: 12//标签字号 }, splitLine: { // 网格线 show: true, // 是否显示，默认为true lineStyle:{ color: ['#eee'], width: 1, type: 'solid' } }, axisLine: { // 坐标轴轴线 show: false, // 是否显示,默认false lineStyle: { // color: '#FFFFFF',//轴线颜色 width: 1,//轴线宽度 type: 'solid'//轴线类型 } }, } ], series: [ { name: '喜爱量', type: 'line',//表明是折线图line data: [10,50,30,26,17,47],//值数据，与类型数据一一对应 itemStyle : { normal : { color:'#FA677B', //折线上的颜色 } }, symbol: 'none',//去掉折线图节点 smooth: true,//是否平滑曲线，true曲线，false直线 // 区域填充样式 areaStyle: { normal: { // 线性渐变，前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1，相当于在图形包围盒中的百分比，如果 globalCoord 为 `true`，则该四个值是绝对的像素位置 color: {//分隔区域的颜色 x0: 0, y0: 0, x2: 0, y2: 1, colorStops: [{ offset: 0, color: "#dc3881" // 0% 处的颜色 }, { offset: 1, color: "rgba(220,56,129,0)" // 100% 处的颜色；中间还可以设置50%、20%、70%时的颜色 }], globalCoord: false // 缺省为 false，以确保上面的x,y,x2,y2表示的是百分比 } } }, } ], }; 3.光滑曲线+线条阴影

3.1效果图：

3.2关键代码：

用红框框起来的部分（曲线样式）替换掉第2点的图中红框框起来的部分（区域填充样式就好）

3.3option配置代码：

var option1 = { //提示框，默认显示 tooltip: { trigger: 'axis', axisPointer: {// 坐标轴指示器，坐标轴触发有效 type: 'line'// 默认为直线，可选为：'line' | 'shadow' }, // 控制提示格式 // formatter: function(param){ // return `${param[0].axisValue}: ${param[0].value}人` // } }, //控制直角坐标系与容器上下左右的距离 grid: { left: '12%', right: '12%', bottom: '0', top: '34%', containLabel: true,//gid区域是否包含坐标轴的刻度标签。 }, //图例相关 legend: { top:'15%', left:'center', data:['喜爱量','运动量','参与量'],//与series两个对象中的name对应 }, // x轴（指的是水平的那条线）相关配置 xAxis: [ { type: 'category', data: ['棒球','羽毛球','足球','网球','篮球','乒乓球'],//类目轴数据 axisLabel: { // 坐标轴标签 show: true, // 是否显示 inside: false, // 是否朝内 color: '#000', fontSize: 12, interval: 0,//设置刻度间间隔，0表示全部显示不间隔；auto:表示自动根据刻度个数和宽度自动设置间隔个数 }, axisLine: { // 坐标轴轴线 show: true, // 是否显示 lineStyle: { // color: '#FFFFFF', width: 1, type: 'solid' }, }, axisTick: {//刻度相关 show: true, //是否显示刻度 alignWithLabel: true,//是否对齐标签 }, inverse:true,//翻转x轴数据 } ], // y轴（垂直的那条线）设置 yAxis: [ { type: 'value',//x轴数据类型，value时就是值，category时就是分类，可用于区分y轴与x轴 axisLabel: { // 坐标轴标签 show: true, // 是否显示 // inside: true, // 标签是否朝内,默认false interval: 0,//设置刻度间间隔，0表示全部显示不间隔；auto:表示自动根据刻度个数和宽度自动设置间隔个数 rotate: 0, // 旋转角度 margin: 5, // 刻度标签与轴线之间的距离 color: '#000', // 标签颜色默认取轴线的颜色 fontSize: 12//标签字号 }, splitLine: { // 网格线 show: true, // 是否显示，默认为true lineStyle:{ color: ['#eee'], width: 1, type: 'solid' } }, axisLine: { // 坐标轴轴线 show: false, // 是否显示,默认false lineStyle: { // color: '#FFFFFF',//轴线颜色 width: 1,//轴线宽度 type: 'solid'//轴线类型 } }, } ], series: [ { name: '喜爱量', type: 'line',//表明是折线图line data: [10,50,30,26,17,47],//值数据，与类型数据一一对应 itemStyle : { normal : { color:'#D640A9', //折线点上的颜色 } }, symbol: 'none',//去掉折线图节点；没起作用？ smooth: true,//是否平滑曲线，true曲线，false直线 // 曲线样式 lineStyle: { // 线性渐变，前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1，相当于在图形包围盒中的百分比，如果 globalCoord 为 `true`，则该四个值是绝对的像素位置 color: { type: 'linear', x: 0, y: 0, x2: 1, y2: 0, colorStops: [{ offset: 0, color: '#3E78BD' // 0% 处的颜色 }, { offset: 1, color: '#D640A9' // 100% 处的颜色 }], globalCoord: false // 缺省为 false }, width: 3,//曲线的宽度 shadowBlur: 10,//图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。 shadowColor: 'rgba(220,172,200,0.9)', //阴影颜色 shadowOffsetX: -10,//阴影水平方向上的偏移距离 shadowOffsetY: 20,//阴影垂直方向上的偏移距离 }, } ], }; 4.echarts跟折线阴影相关的配置可以参考W3Cschool的讲解：

ECharts grid组件配置坐标轴指示器线条样式设置_w3cschool

5.折线图与柱状图混合

5.1效果图：

5.2关键代码：

只需要在series里面写几个对象，每个对象就是一种数据的类型样式的配置对象，折线的数据对象就使type='line'，柱状的数据随想就使type='bar'，这样就可以在柱状图上拥有折线了；其他地方的配置按需即可，每种类型的图配置都差不多。

注意！！！

错误示范 =====>

5.3option配置代码如下：

var option1 = { //提示框，默认显示 tooltip: { trigger: 'axis', axisPointer: {// 坐标轴指示器，坐标轴触发有效 type: 'line'// 默认为直线，可选为：'line' | 'shadow' } }, //控制直角坐标系与容器上下左右的距离 grid: { left: '17%', right: '17%', bottom: '15%', top: '14%', containLabel: true,//gid区域是否包含坐标轴的刻度标签。 }, //图例相关 legend: { top:'90%', left:'center', data:['喜爱人数','实际运动人数'],//与series两个对象中的name对应 itemGap: 15, // 图例间隔 itemWidth: 8, //图例大小(小方块) itemHeight: 8, //图例大小 orient: 'vertical',// horizontal vertical icon: "rectangle", //图例的形状 textStyle: { //图例文字的样式 color: '#000', fontSize: 12 }, }, // x轴（指的是水平的那条线）相关配置 xAxis: [ { type: 'category', data: ['棒球','羽毛球','足球','网球','篮球','乒乓球'],//类目轴数据 axisLabel: { // 坐标轴标签 show: true, // 是否显示 inside: false, // 是否朝内 color: '#000', fontSize: 12, interval: 0,//设置刻度间间隔，0表示全部显示不间隔；auto:表示自动根据刻度个数和宽度自动设置间隔个数 }, splitLine: { // 网格线 show: false // 是否显示，默认为false }, axisLine: { // 坐标轴轴线 show: true, // 是否显示 lineStyle: { // color: '#FFFFFF', width: 1, type: 'solid' } }, boundaryGap: 'true',//显示刻度，默认为 true,只是作为分隔线，标签和数据点都会在两个刻度之间的带中间 axisTick: {//坐标轴刻度相关 alignWithLabel: true,//类目轴中在`boundaryGap`为`true`的时候有效，可以保证刻度线和标签对齐 }, inverse:true,//翻转y轴数据 } ], // y轴（垂直的那条线）设置 yAxis: [ { type: 'value',//x轴数据类型，value时就是值，category时就是分类，可用于区分y轴与x轴 axisLabel: { // 坐标轴标签 show: true, // 是否显示 // inside: true, // 标签是否朝内,默认false // interval: 0,//设置刻度间间隔，0表示全部显示不间隔；auto:表示自动根据刻度个数和宽度自动设置间隔个数 rotate: 0, // 旋转角度 margin: 5, // 刻度标签与轴线之间的距离 color: '#000', // 标签颜色默认取轴线的颜色 fontSize: 12//标签字号 }, splitLine: { // 网格线 show: false // 是否显示，默认为true }, axisLine: { // 坐标轴轴线 show: true, // 是否显示,默认false lineStyle: { // color: '#FFFFFF',//轴线颜色 width: 1,//轴线宽度 type: 'solid'//轴线类型 } }, }, { type: 'value',//x轴数据类型，value时就是值，category时就是分类，可用于区分y轴与x轴 axisLabel: { // 坐标轴标签 show: true, // 是否显示 // inside: true, // 标签是否朝内,默认false // interval: 0,//设置刻度间间隔，0表示全部显示不间隔；auto:表示自动根据刻度个数和宽度自动设置间隔个数 rotate: 0, // 旋转角度 margin: 5, // 刻度标签与轴线之间的距离 color: '#000', // 标签颜色默认取轴线的颜色 fontSize: 12//标签字号 }, splitLine: { // 网格线 show: false // 是否显示，默认为true }, axisLine: { // 坐标轴轴线 show: true, // 是否显示,默认false lineStyle: { // color: '#FFFFFF',//轴线颜色 width: 1,//轴线宽度 type: 'solid'//轴线类型 } }, } ], series: [ { name: '喜爱人数', type: 'line',//表明柱状体，饼图是pie，折线图是line barWidth: 10,//柱子宽度 data: [10,50,30,26,17,47],//值数据，与类型数据一一对应 yAxisIndex: 0,//数据的刻度对应左边 itemStyle: { normal: {//柱子相关设置 // barBorderRadius: [7,7,0,0],//设置柱子圆角;左上-右上-右下-左下 color: '#F9456D' }, } }, { name: '实际运动人数', type: 'bar',//表明柱状体，饼图是pie，折线图是line barWidth: 20,//柱子宽度 data: [18,30,25,40,27,17],//值数据，与类型数据一一对应 yAxisIndex: 1,//数据的刻度对应右边 itemStyle: { emphasis: {//鼠标移入动态的时候显示的默认样式 color: '#ccc', }, normal: {//柱子相关设置 color: '#497EF2', label: { show: true, formatter: '{c}人', color: '#000', position: 'top', } }, } } ], };

【本文地址】

公司简介

联系我们